<template>
	<a-modal :confirmLoading="handing" width="540px" v-model:open="showForm" title="编辑权限" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapper-col="{ span: 16, offset: 1 }">
			<a-form-item name="id" label="权限路径">
				<a-input v-model:value="formData.id" placeholder="2-20个字符,如User:save" />
			</a-form-item>
			<a-form-item name="name" label="权限名称">
				<a-input v-model:value="formData.name" placeholder="2-10个字符,如:创建用户" />
			</a-form-item>
			<a-form-item name="perms" label="上级">
				<a-tree-select
					v-model:value="formData.pid"
					:tree-data="[{value:0, label:'---------'}].concat(perms)"
					:tree-line="true"
					placeholder="选择上级"
					tree-node-filter-prop="label"
				>
					<template #notFoundContent>
						<div class="flex justify-center py-lg">
							<LoadingOutlined />
						</div>
					</template>
				</a-tree-select>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import {page, form} from "@/mixins"
import {useCacheStore} from '@/stores/cache'
import {mapState} from 'pinia'

export default {
	mixins: [page, form],
	data() {
		return {
			showForm: false as boolean,
			formPath: 'perm',
			formData: {
				id: '',
				name: '' as string,
				pid: 0 as number
			},
			rules: {
			  id: [{ required: true, trigger: 'change' }],
			  name: [{ required: true, trigger: 'change' }],
			  pid: [{ type: 'number', min: 1, trigger: 'change', message: '上级不能为空' }]
			}
		}
	},
	computed: mapState(useCacheStore, ['perms']),
	methods: {
		add() {
			Object.assign(this.formData, {
				id: '',
				name: '',
				pid: 0,
				status: 0
			})
			this.showForm = true;
		},
		edit(record : object) {
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		}
	}
}
</script>